<template>
<!-- 引入子组件继续展示 -->
  <center>
    <h1>我是Demo01View视图组件</h1>
    <d1 v-if="flag"></d1>
    <button @click="showDemo01">点击显示或者隐藏Demo01子组件</button>
    <hr>

    <div ref="username">大锤</div>
    <br><br>
    <button @click="change">改变DIV的元素内容</button>
    <br><br>
    <button @click="change1">改变Vuex当中定义的number属性值</button>
  </center>
</template>

<script>
  import d1 from '@/components/Demo01'

  export default {
    name: "Demo01View",
    data(){
      return{
        flag: false
      }
    },
    components: {
      d1
    },
    methods: {
      showDemo01(){
        this.flag = !this.flag;
      },
      change(){
        // 通过this.$refs.名字获取对应的元素对象
        let div1 = this.$refs.username;
        console.log(div1);
        console.log("获取di对象的文本数据：" + (div1.innerText));
        div1.innerHTML = "<h1>改变之后的大锤</h1>"
      },
      change1(){
        this.$store.state.number = 30;
      }
    }
  }
</script>

<style scoped>

</style>